<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>GUI</title>
	<link rel="shortcut icon" href="img/favicon.ico">
	<link rel="stylesheet" href="css/jquery.mobile-1.4.3.min.css">
	<link rel="stylesheet" href="css/jqm-demos.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="cordova.js"></script>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script src="js/jquery.paginate.js" type="text/javascript"></script>

    <script src="js/loadMyBook.js" type="text/javascript"></script>
	<script src="js/jquery.mobile-1.4.3.min.js"></script>
    

</head>

<body>


	    <div data-role="navbar" data-iconpos="left">
	        <ul>
	            <li><a href="index.html" data-icon="grid" class="ui-btn-active" rel="external">My books</a></li>
                <li><a href="screen2.html" data-icon="star" rel="external">All books on Server</a></li>
	            <li><a href="test.html" data-icon="star" rel="external">Test</a></li>
	        </ul>
	    </div><!-- /navbar -->
		
    <div data-role="content">
        <div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
            <div data-role="header" data-theme="a">
                <h1>UPDATE</h1>
            </div>
            <div role="main" class="ui-content">
                <h3 class="ui-title">Are you sure you want to update this book?</h3>
            <p>This action cannot be undone.</p>
                <a href="#" id="openOldVersion" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Open old version</a>
                <a href="#" id="updateNewVersion" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Update</a>
            </div>
        </div>
        <div class="ui-grid-a" id="mybook">

            <!-- <div class="ui-block-b block-center">
                <div class="img-left">
                    <a href=""><img src="img/Book-icon.png"></a>
                </div>
                <div class="content-right">
                    <span>Title: </span><span><p>Cau Truc Du Lieu va Giai Thuat</p></span>
                    <span>Author: </span><span><p>Tho Phan</p></span>
                </div>
            </div> -->
            <!-- <a href='#' class='openPopup' data-rel='popup'><img src='img/Book-icon.png'>test</a> -->
             <!--   <div class="ui-block-b block-center">
                 <div  class="img-left">
                     <a href='#' class='myButton' id="1" data-rel='popup'><img src="img/Book-icon.png"></a>
                     <div class="div-update">
                             <p>Update1</p>
                     </div>
                 </div>
                 <div class="img-right">
                         <span>Title: </span><span><p>Cau Truc Du Lieu va Giai Thuat</p></span>
                         <span>Author: </span><span><p>Tho Phan</p></span>
                     </div>
             </div>
             <div class="ui-block-b block-center">
                 <div>
                     <div class="img-left">
                         <a href=""><img src="img/Book-icon.png"></a>
                     </div>
                     <div class="img-right">
                         <span>Title: </span><span><p>Cau Truc Du Lieu va Giai Thuat</p></span>
                         <span>Author: </span><span><p>Tho Phan</p></span>
                     </div>
                 </div>
             </div> -->
        </div>
    </div>


    <div class="paging">
            <div id="paging"></div>
    </div>
    <script type="text/javascript">
        $(function() {
            $("#paging").paginate({
                count       : 10,
                start       : 1,
                display     : 5,
                border                  : true,
                border_color            : '#BEF8B8',
                text_color              : '#68BA64',
                background_color        : '#E3F2E1',    
                border_hover_color      : '#68BA64',
                text_hover_color        : 'black',
                background_hover_color  : '#CAE6C6', 
                rotate      : false,
                img      : false,
                mouse       : 'press'
            });
        });
    </script>   
</body>
</html>